<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>{$title}</title>
    <link rel="stylesheet" type="text/css" href="front/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="front/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="front/css/index1.css"/>
    <!--<link rel="stylesheet" type="text/css" href="../dist/v20170614/run-common-min.css"/>-->
    <script type="application/javascript" src="front/js/jquery.min.js"></script>
    <script type="application/javascript" src="front/js/uiBind.js"></script>
    <!--<script type="application/javascript" src="front/js/scgc_vote.js"></script>-->
    <script type="application/javascript" src="front/js/vue.min.js"></script>
    <script type="application/javascript" src="front/js/layer_mobile/layer.js"></script>
    <script type="application/javascript" src="front/js/vote1.js"></script>
    <!--<script type="application/javascript" src="dist/v20170323/run_common-min.js"></script>-->
</head>
<body>
<div id="app">
    <div class="wrapper j_vote">
        <div class="banner" style="height: auto">
            <!--banner图-->
            <img :src="banner">
        </div>
        <!-- 主区域-->
        <div class="content" >
            <!--tab & search-->
            <div class="search-area clear">
                <!-- 搜索区-->
                <div class="search" style="margin: 0.1rem 0">
                    <input class="search-input j_search_input" placeholder="输入名字" v-model="keyword">
                    <span class="search-btn j_search" @click="search()"></span>
                    <!--<img class="search-btn j_search" src="front/img/search.png">-->
                </div>
            </div>
            <!-- 选手们-->
            <div class="main-content j_acitvity clear" >
                <div class="item" v-for="i,k in list" style="width: 48%;height:7rem;" v-cloak>
                    <span class="item-order" v-if="is_rank==1">Top{{k+1}}</span>

                    <div class="bg-gray" style="padding:1px; background: url('front/img/kuang.png') no-repeat;background-size:100%;overflow: hidden;height:7rem;">
                        <a :href="i.video_url" style="float: left; width: 45%">
                            <div class="img-area">
                                <img :src="i.head_img" style="padding-top: .1rem">
                            </div>
                        </a>
                        <i class="iplay"></i>
                        <a :href="i.video_url">
                        <div class="txt-area clear" style="width: 55%; margin: 0 auto 1rem auto; float: left; border: none;">
                            <p class="name" style="overflow: auto;white-space: normal">
                                {{i.name}}
                            </p>
                            <p class="desc" ><span>{{i.remark}}</span></p>
                            <!--<p class="desc" v-for="j in i.content"><span>{{j}}</span></p>-->

                        </div>
                        </a>
                    </div>

                </div>

                <!--<button class="more" >更多</button>-->
            </div>
            <div class="more" @click="more()" v-if="enablePage && showMore" style="background: #DE3D38;font-size: 0.6rem;color: #fff;border-radius:0.7rem;width: 5rem;height: 1.7rem;vertical-align: middle;font-weight: bold">加载更多</div>
        </div>

    </div>
</div>
{include file="vote/extend"}
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            vote_id:"{$vote.id}",
            is_rank:0,
            banner:"{$banner}",
            all:[],
            list:[],
            keyword:'',

            limit:20,
            showMore:false,
            enablePage:true,
        },
        created:function(){
            this.getList('','');
        },
        methods:{
            //搜索
            search:function () {
                console.log('search');
                this.getList('',this.keyword)
            },

            //获取数据
            getList:function (order,keyword) {
                var _this = this;
                $.post("{:url('getMeetingList', ['site' => $site_id])}",{vote_id:_this.vote_id,type_id:_this.type_id,order:order,keyword:keyword},function (res) {
                    _this.all = res.data.list
                    if(!_this.enablePage){
                        _this.list = _this.all
                    }else {
                        //分页
                        _this.list = _this.all.splice(0,_this.limit)
                        if(_this.all.length > 0){
                            _this.showMore = true
                        }else {
                            _this.showMore = false

                        }
                    }
                },'json')
            },
            more:function(){
                var list = this.all.splice(0,this.limit);
                this.list = this.list.concat(list);
                if(this.all.length <= 0)
                    this.showMore = false
            },
            checkIsApp:function () {
                var userAgent = "{$app.app_ua}";
                var enableCheck = "{$app.enable_web_vote}";
                return checkApp(userAgent,enableCheck)
            }
        },
    })
</script>
<style>
    .txt-area .name{
        text-align: center !important;
        height: 1.6rem;
        margin: 1rem auto;
        font-weight: bold;
    }
    .desc{
        font-weight: bold;
        font-size:.50rem;
        margin: 0px;
        padding: 0px;
        text-align: center;
    }
    .desc p{
        margin: 0.2rem auto 0 auto;
    }
    .wrapper .content .search-area .search .search-input{
        background: none;
        padding-left: 0.75rem;
        border-radius: 0.55rem;

    }
    .wrapper .content .search-area .search span {
        width: 5rem;
        background: url(front/img/search.png) no-repeat center /100% !important;
        border-radius: 0 !important;
        right: 0;
    }
    .wrapper .content .search-area .search .search-input{
        border: none;
        background-color: #D7D7D7;
        width: 100%;
    }
    .wrapper .content .main-content .item{
        width: 49%;
        margin: 0 1%;
    }
    .wrapper .content .main-content .item:nth-child(even){
        float: right;
    }
    .wrapper .content .main-content .item:nth-child(odd){
        float: left;
    }

</style>
</html>